<template>
<view class="find">
       
     <view class="find-search">
            <view class="find-search-input">
                <image src="/static/images/search_icon.png" class="find-search-icon" />
                <input type="text" 
                :value="title"
                placeholder="朱颜荟-越美丽越优惠"
                bindconfirm=”search“
                placeholder-style="color:#999"
                @confirm="getSearchValue"/> 
            </view>
     </view>

     <scroll-view  scroll-x style="padding:0rpx 25rpx 0;box-sizing:border-box;background:#fff">
            <view class="find-tabs">

                    <view 
                    :class="[classifyId == item.classifyId?'find-tabs-item on':'find-tabs-item']"
                     v-for="(item,index) in tabList"
                     :key="index"
                     @tap="tab(item.classifyId)">
                            {{item.classifyName}}
                    </view>

                  
                    
            </view>
        </scroll-view>  




        
          <scroll-view 
            style="height:calc( 100vh - 200rpx );background:#f5f5f5"
             refresher-background="#f5f5f5"
            class="scroll-y" 
            scroll-y="true"
            scroll-anchoring="true"
            :refresher-enabled="true"
            @scrolltolower="scrolltolower"
            @refresherrefresh="onRefresh"    
            :refresher-triggered="triggered"
            @scroll="handleScroll">

      
             
        <view class="waterfall-list">
          
          
                <view class="waterfall-list-l" >

                      <ImagItem 
                            class="wCard"
                            v-if="index%2 == 0"
                            v-for="(item,index) in list"
                            :key="index" 
                            :id="'group'+item.id"
                            :d="item" >
                            <!-- <video
                             :id="'group'+item.id+'video'"
                             style="width:350rpx;height:350rpx"
                             v-if="item.isVideo == 1"
                             slot="video"
                             object-fit="fill"
                             :show-fullscreen-btn="false"
                             :show-center-play-btn="false"
                             :show-play-btn="false"
                             src="https://wwkeji.oss-cn-shanghai.aliyuncs.com/3b793459e89829309a5dda4b5e3f1fc4.mp4"   
                            /> -->
                      </ImagItem>
                       
                </view>
                <view class="waterfall-list-r">
                         <ImagItem
                                 class="wCard"
                                v-if="index%2 != 0"
                                v-for="(item,index) in list"
                                :key="index" 
                                :d="item"
                                :id="'group'+item.id">
                                  <!-- <video
                             :id="'group'+item.id+'video'"
                            style="width:350rpx;height:350rpx"
                             v-if="item.isVideo == 1"
                             slot="video"
                             object-fit="fill"
                             :show-fullscreen-btn="false"
                             :show-center-play-btn="false"
                             :show-play-btn="false"
                              src="https://wwkeji.oss-cn-shanghai.aliyuncs.com/3b793459e89829309a5dda4b5e3f1fc4.mp4"   
                            /> -->
                         </ImagItem>
                </view>
             
            
          
          
           
          </view>
         
          <PageBottom :LoadingType="loadingType" noMoreStr="抱歉,没有更多文章" noDataStr="抱歉,暂时没有文章"/>
           


     </scroll-view>  

    </view>     
</template>
<script lang="ts">


import PageBottom from '@components/pageBottom/index.vue'
import ImagItem from '@components/waterfallCard/index.vue'
import {postBeautifuLessay , postClassify } from '@/request/actions';

import {Vue, Component, Prop} from 'vue-property-decorator';

const LIMIT = 10;


interface BaseOpts{
    page:number;
    limit:number;
    userId?:number;
    title?:string;
    classId?:string|number;
};




@Component({
    components:{
        PageBottom,
        ImagItem
    }
})
export default class extends Vue {
 
    list:Array<any> = [];
    loadingType:string | number = 'none';
    triggered:boolean = false;
    page:number = 1;
    limit:number = 10;
    bStop:boolean = true;
    tabList:Array<any> = [];
    classifyId:number|string = '';
    title:string ='';
    classId:string|number = '';
    playIdx:any = {rIdx:1,lIdx:1};
    lobserverObj:any = null;
    robserverObj:any = null;
    videoObserve:any = null;
    rlist:Array<any> = [];
    llist:Array<any> = [];
    srcollId:string = '';
    intersectionRatio:number = 1;
  
    HttpBeautifuLessay(arr:Array<any> = []){
            let page = this.page;
            let limit = this.limit;
            let {userInfo} = getApp().globalData;
          
            let list:Array<any> = arr;
            let title = this.title;
            let classId = this.classifyId;
            let opts:BaseOpts = {page,limit,classId,title};
            
        
            if(Object.keys(userInfo).length){
                    let {userId} = userInfo;
                    opts = {...opts,userId}
            }

            uni.showLoading();
             this.rlist = [];
             this.llist = [];
            postBeautifuLessay(opts).then( (r:any) =>{
                let {data:res} = r;
                if(res.status == 200){
                    list.push(...res.data.stulist);
                    this.list = list;
                    list.forEach((item,i)=>{

                            if(i%2 == 0){
                                this.llist.push(item)
                            }else{
                                this.rlist.push(item);
                            }

                    })

                     
                    
                    
                  
                    this.bStop = res.data.stulist.length < limit ?  false : true;
                        if(res.data.total == 0){
                            this.loadingType = 0;
                        }else if(res.data.total == this.list.length){
                            this.loadingType = 1;


                        }
                }

               
        
                uni.hideLoading();
                this.triggered = false;
            
            })
    }
       
          scrolltolower(){
               this.page++;
          
               if(!this.bStop) return;
               this.limit = LIMIT;
               this.HttpBeautifuLessay(this.list); 
          }

          onRefresh(){
            this.triggered = true;
            this.limit = LIMIT;
            this.page = 1;
            this.bStop = true;
            this.HttpBeautifuLessay();
                
          }

          tab(id:number|string){
            this.classifyId = id;
            this.limit = LIMIT;
            this.page = 1;
            this.bStop = true;
            this.HttpBeautifuLessay();
          }

          getSearchValue(e:any){
            this.title = e.detail.value;
            this.limit = LIMIT;
            this.page = 1;
            this.bStop = true;
            this.HttpBeautifuLessay();
          }
      
       controlVideo(res:any,list:Array<any>,str:string){
             
          
        //   console.log(res)
          
            if (res && res.intersectionRatio  > 0 ) {
                
                uni.createVideoContext(res.id+'video').play();

             }else{

                  uni.createVideoContext(res.id+'video').pause();

               
       
               
                
                
           
                 
                 
                  
             }
            
          
       }   
       
    
       handleScroll(){

     
        const opts = { top: -200, bottom: -100 }

        // this.list.forEach(item=>{
        //         uni.createIntersectionObserver(this, { observeAll: true }).relativeToViewport(opts).observe(`#group${item.id}`,this.controlVideo);
        // })
        
 
     }
    
    onShow(){
       
        this.limit = this.list.length <= LIMIT?LIMIT:this.list.length;
        this.page = 1;
        this.bStop = true;
        this.HttpBeautifuLessay();

        
        
    }

    onLoad(){
      
        postClassify().then((r:any)=>{
                 let {data:res} = r;
                 if(res.status == 200){
                     this.tabList = res.data;
                     this.classifyId = res.data[0].classifyId;
                 }
               

        })
    }
    
}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>